<template>
  <div class="login">
    <div class="inner">
      <p>登录账号</p>
      <p>虾米 - 严选商城欢迎您</p>

      <yx-input
        :class="isUserTrue"
        v-model="username"
        placeholder="用户名"
        @blur="userBlur"
        :type="'text'"
      >
        <template #text>
          <span class="text" v-show="isUserTrue == 'error'">必填</span>
        </template>
        <template #icon>
          <van-icon class="icon" name="phone"></van-icon>
        </template>
        <!-- # 给插槽起名字 相当于是之前的 v-slot:xxx 放template是因为不会被解析成任何标签 不会污染布局-->
      </yx-input>
      <!-- 用户名 -->
      <yx-input
        v-model="password"
        :placeholder="'密码'"
        :class="isPassTrue"
        @blur="passBlur"
        :type="flag"
      >
        <template #text>
          <span class="text" v-show="isPassTrue == 'error'">必填</span>
        </template>
        <template #icon>
          <van-icon
            class="icon"
            name="closed-eye"
            @click="flag = 'text'"
            v-if="flag == 'password'"
          ></van-icon>
          <van-icon v-else name="eye-o" @click="flag = 'password'"></van-icon>
          <!-- 点击的时候切换flag的值 password和text -->
        </template>
      </yx-input>
      <!-- 密码 -->

      <p class="center">
        <span class="center" @click="yxLogin">登陆</span>
      </p>

      <p>忘记密码</p>
      <p @click="$router.push('/resign')">还没有注册？ 立即注册</p>
    </div>
  </div>
</template>
<script>
import yxInput from "@/components/yxInput.vue";
//引入子组件
import { ref, reactive, toRefs } from "vue";
//引入组合api的方法
import { login } from "@/utils/http/personal";
//登陆请求的接口方法
import { useRouter } from "vue-router";
//引入路由
export default {
  setup(props) {
    const router = useRouter();
    const username = ref("");
    //用户名
    const password = ref("");
    //密码
    const isUserTrue = ref("");
    //判断用户名是否正确
    const isPassTrue = ref("");
    //判断密码是否正确

    const flag = ref("password");
    //密码是否可见

    const userBlur = () => {
      console.log("这是父组件里的失焦事件");
      let reg = /^1[3,5,7,8,9,6][0-9]{9}$/;
      // 正则用test方法去验证输入的用户名
      if (username.value != "" && reg.test(username.value)) {
        isUserTrue.value = "success";
      } else {
        isUserTrue.value = "error";
      }
    };
    //用户名失去焦点的时候 判断 用户名的value值不为空并且满足正则的时候 就让isUserTrue这个变量变成success 否则就变成error 为什么是success和error而不是truefalse呢 ？因为我们在子组件里定义的类名就是success和error 这样可以少一步判断

    const passBlur = () => {
      // if (password.value != "") {
      //   isPassTrue.value = "success";
      // } else {
      //   isPassTrue.value = "error";
      // }
      isPassTrue.value = password.value != "" ? "success" : "error";
    };
    //密码失去焦点的时候判断value是否为空

    const yxLogin = () => {
      if (isUserTrue.value == "success" && isPassTrue.value == "success") {
        login({ username: username.value, password: password.value }).then(
          (res) => {
            console.log(res);
            if (res.code == 0) {
              localStorage.setItem("token", res.data.token);
              //把token存下来作为登陆成功的标识
              router.push("/home");
            }
          }
        );
      }
    };
    //登陆方法
    return {
      username,
      password,
      isUserTrue,
      isPassTrue,
      userBlur,
      passBlur,
      flag,
      yxLogin,
    };
  },
  components: {
    yxInput,
  },
};
</script>
<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  padding: 20px 20px;
  box-sizing: border-box;
  .inner {
    border: 1px solid #f5f5f5;
    padding: 30px;
    box-sizing: border-box;
    height: 580px;
    p:nth-child(1) {
      color: #666;
      font-size: 22px;
    }
    p:nth-child(2) {
      color: #909090;
      font-size: 15px;
      margin-top: 26px;
    }
    p:nth-child(6) {
      color: #989898;
      font-size: 12px;
      margin-top: 26px;
      text-align: center;
    }
    p:nth-child(7) {
      color: #549ff9;
      font-size: 15px;
      margin-top: 26px;
      text-align: center;
    }

    p:nth-child(5) {
      margin-top: 22px;
      span {
        width: 210px;
        height: 50px;
        color: #fff;
        font-size: 14px;
        border-radius: 4px;
        background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
      }
    }
  }
}
</style>
